<template>
  <img
    class="avatar-container"
    :src="server_URL + url"
    :style="{
      width: size + 'px',
      height: size + 'px'
    }"
  />
</template>

<script setup lang="ts">
import { server_URL } from '@/urlConfig'
defineProps({
  url: {
    type: String, // url属性必须是一个字符串
    required: true // 属性必传
  },
  size: {
    type: Number,
    default: 150
  }
})
</script>

<style scoped lang="scss">
@import '@/styles/var.scss';
/* 带有作用域的样式 */
.avatar-container {
  border-radius: 40% 60% 83% 17% / 50% 89% 11% 50%;
  object-fit: cover;
  display: block;
  --c: #5758bb;
  box-shadow:
    0 0 10px var(--c),
    0 0 20px var(--c),
    0 0 40px var(--c),
    0 0 80px var(--c),
    0 0 160px var(--c);
}
</style>
